<template>
  <div>
    <!-- <div class="login-title">这里是个人中心</div> -->
    <div class="header-box">
      <img class="header-icon" src="../../assets/header.png" />
      <div class="header-text">
        <div style="font-size:25px;margin-bottom:5px;">{{this.$store.getters.userData.name}}</div>
        
        <div style="font-size:15px;">{{this.$store.getters.userData.studentNum}}</div>
      </div>
    </div>
    <mt-cell class="cell-box" title="我的信息" is-link @click.native="userinfopop">
      <img slot="icon" src="../../assets/userinfo.png" width="24" height="24" />
    </mt-cell>
    <mt-cell class="cell-box" title="借车记录" is-link @click.native="recordinfopop('open')">
      <img slot="icon" src="../../assets/record.png" width="24" height="24" />
    </mt-cell>
    <mt-cell class="cell-box" title="扣费说明" is-link @click.native="costinfopop">
      <img slot="icon" src="../../assets/cost.png" width="19" height="26" style="margin:0 3px;" />
    </mt-cell>
    <mt-cell class="cell-box" title="修改密码" is-link @click.native="resetpassword" >
      <img slot="icon" src="../../assets/resetpwd.png" width="21" height="24" style="margin:0 3px;" />
    </mt-cell>
    <!-- 管理员权限 -->
    <mt-cell class="cell-box" v-if="this.$store.getters.userData.roles[0]=='ROLE_ADMIN'" title="重置用户密码" is-link @click.native="resetallpassword" >
      <img slot="icon" src="../../assets/resetpwd.png" width="21" height="24" style="margin:0 3px;" />
    </mt-cell>
    <mt-cell class="cell-box" title="退出登录" is-link @click.native="logout">
      <img
        slot="icon"
        src="../../assets/tuichu.png"
        width="24"
        height="24"
        style="margin-left:3px;"
      />
    </mt-cell>

    <!-- <div>{{this.$store.getters.userData.roles[0]}} </div> -->
    <!-- 我的信息 -->
    <mt-popup v-model="popuservalue" position="right">
      <div class="pop">
        <div class="pop-text">
          <mt-cell class="cell-box" title="用户名" :value="this.$store.getters.userData.name"></mt-cell>
          <mt-cell class="cell-box" title="登录账号" :value="this.$store.getters.userData.loginCode"></mt-cell>
          <mt-cell class="cell-box" title="学号" :value="this.$store.getters.userData.studentNum"></mt-cell>
          <mt-cell class="cell-box" title="借车状态" :value="changborrowstatus2(this.$store.getters.userData.borrowStatus)"></mt-cell>

        </div>
        <mt-button
          type="primary"
          size="small"
          @click.native="userinfopop()"
          style="margin-top:20px;"
        >关闭</mt-button>
      </div>
    </mt-popup>
    <!-- 扣费说明 -->
    <mt-popup v-model="popcostvalue" position="right">
      <div class="pop">
        <div class="pop-text">
          五分钟内不扣费
          <br />超过五分钟每五分钟扣1元
          <br />如：43分钟扣费8元
          <br />6分钟扣费1元
          <br />（系统测试时为每2分钟扣1元）
        </div>
        <mt-button
          type="primary"
          size="small"
          @click.native="costinfopop"
          style="margin-top:20px;"
        >关闭</mt-button>
      </div>
    </mt-popup>

    <!-- 借车记录 -->
    <mt-popup v-model="recordvalue" position="right">
      <div class="pop">
        <div class="pop-text">
          <div style="font-size:20px;">借车记录(显示最近10条)：</div>
          <div style="font-size:20px;" v-if="recorddata.length==0">无借车记录</div>
          <mt-cell-swipe
            class="cell-swipe"
            v-for="(record,index) in recorddata"
            :key="record.index"
          >
            <div slot="title">{{index+1}}</div>
            <div slot>{{record.updatedTime}}-{{changborrowstatus(record.borrowStatus)}}-{{record.useCost}}元</div>
          </mt-cell-swipe>
        </div>
        <mt-button type="primary" size="small" @click.native="recordinfopop('empty')">关闭</mt-button>
      </div>
    </mt-popup>
  </div>
</template>
<script>
import {recordsget} from '../../api/record'
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      popuservalue: false,
      popcostvalue: false,
      recordvalue: false,
      recorddata:[]
    };
  },
  methods: {

    resetpassword(){
      this.$router.push({ path: "/ResetPassword" });
    },
    resetallpassword(){
      this.$router.push({ path: "/ResetAllPassword" });
    },
    logout() {
      // this.$router.replace({ path: "/" });
      this.$router.go(0);
      this.$store.commit('user/LOGOUT');
       console.log("yes!退出成功！")
    },
    userinfopop() {
      this.popuservalue = !this.popuservalue;
    },
    costinfopop() {
      this.popcostvalue = !this.popcostvalue;
    },
    recordinfopop(value) {
      if(value=='open'){
        this.getrecords();
      }
      this.recordvalue = !this.recordvalue;
    },
    changborrowstatus(value) {
      if (value == 0) return "未还车";
      else if (value == 1) return "已还车";
    },
    changborrowstatus2(value) {
      if (value == 0) return "未借车";
      else if (value == 1) return "已借车";
    },
    //请求records数据
    getrecords(){
      recordsget().then(res => {
          if(res.code===1){
          console.log(res);
          this.recorddata = res.data;
          return  1;
        }
        else{
          Toast({
            message: "获取记录失败",
            position: "middle",
            duration: 1000
          })
          return  0;
        }
      })
    }
  }
};
</script>
<style  scoped>
.header-box {
  height: 350px;
  background-color: #13b2e2;
  color: rgb(102, 100, 100);
  margin-bottom: 50px;
}
.header-box .header-icon {
  margin-top: 50px;
}
.header-box .header-text {
  margin-top: 10px;
}
.cell-box {
  text-align: start;
  text-decoration: none;
  color: #444444;
}

.mint-cell {
  height: 40px !important;
}

.pop {
  background-color: white;
  padding: 30px;
  /* height: 100%; */
  width: 100vw;
  /* font-size: 50px; */
}
.pop-text {
  font-size: 50px;
  text-align: start;
}
</style>
<style>
.cell-swipe {
  min-height: 70px !important;
  font-size: 15px;
}
/* .mint-cell{
  min-height:50px !important;
} */
</style>